class LoadingManager {
  constructor() {
    this.loading = null
    this.style = null
    this.init()
    this.progressBar = null
    this.progressNum = null
  }

  init() {
    // 创建loading元素
    this.loading = document.createElement('div')
    this.loading.className = 'global-loading'
    this.loading.innerHTML = `
      <div class="loader">
        <div class="css-heart heart1"></div>
        <div class="css-heart heart2"></div>
        <div class="css-heart heart3"></div>
        <div class="css-heart heart4"></div>
      </div>
      <div class="progress-container">
        <div class="progress-bar" id="myProgressBar"></div>
      </div>
      <div class="progress-num" id="myProgressNum"></div>
    `

    // 创建样式
    this.style = document.createElement('style')
    this.style.textContent = `
        .global-loading {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 9999;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          background-color: rgba(255, 255, 255, 1);
        }

        .progress-container {
          width: 230px;
          background-color: #f5f5f5;
          border-radius: 25px;
          overflow: hidden;
          margin-top: 5px;
        }
        .progress-bar {
          height: 4px;
          width: 0;
          background-color: red;
          border-radius: 25px;
        }
        .progress-num {
          text-align: center;
          font-size: 14px;
          color: red;
          padding-top: 14px;
        }
        .loader {
          position: relative;
          width: 60px;
          height: 60px;
          vertical-align: middle;
          display: inline-block;
          margin-bottom: 100px;
        }
        .loader .css-heart { position: absolute; animation: star-fly-out 1s ease alternate infinite; transform: scale(0.2); }
        .css-heart:before,  .css-heart:after { position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; background: red; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; transform-origin: 0 100%; }
        .css-heart:after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; }
        .loader .heart1 { top: 0; left: 30px; }
        .loader .heart2 { left: 60px; top: 30px; }
        .loader .heart3 { top: 60px; left: 30px; }
        .loader .heart4 { left: 0; top: 30px; }
        @keyframes star-fly-out {
          0% {
            top: 20px;
            left: 20px;
          }
          100% {
          }
        }
      `
  }

  show() {
    try {
      document.body.appendChild(this.loading)
      document.head.appendChild(this.style)
      this.progressBar = document.getElementById('myProgressBar')
      this.progressNum = document.getElementById('myProgressNum')
    } catch (err) {
      console.log(err)
    }
  }

  hide() {
    try {
      document.body.removeChild(this.loading)
      document.head.removeChild(this.style)
    } catch (err) {
      console.log(err)
    }
  }
}

export const loadingManager = new LoadingManager()
